<!--
 * @Author: gyc
 * @Date: 2020-05-16 07:56:50
 * @LastEditTime: 2020-06-06 10:45:05
 * @Description: Nuxt测试版
--> 
<template>
  <!-- <vuePlayer></vuePlayer> -->
  <div class="mo-vedio">
    <div class="mo-vedio-box">
      <div class="vedio-msg">
        <p style="color:black">刀剑神域</p>
        <P>
          <Icon type="md-person" style="margin-right:5px" />别动我结菜
          <Icon type="ios-paper-plane" style="margin-right:5px" />2020-5-25
        </P>
      </div>
      <div ref="dplayer" id="dplayer" class="dplayer"></div>
      <div class="more-movie">
        <h3>更多精彩视频</h3>
      </div>
    </div>
  </div>
</template>
<script>
// import vuePlayer from "@/components/vedio/vedio";
export default {
  name: "moVedio",
  layout: "dpage",
  // asyncData({ error }) {
  //   // error({ statusCode: 404, message: "Post not found" });
  // },
  data() {
    return {
      DPlayer: ""
    };
  },
  mounted() {
    this.DPlayer = require("dplayer");
    this.init();
  },
  methods: {
    init() {
      const dp = new this.DPlayer({
        container: this.$refs.dplayer,
        logo: "logo.png",
        screenshot: true, // 截图
        video: {
          url: "/media/sao.mp4", // 单清晰度视屏播放
          defaultQuality: 0
          // pic: "demo.png",
          // thumbnails: "thumbnails.jpg"
        }
      });
    }
  },
  components: {
    // vuePlayer
  }
};
</script>
<style lang="scss" scoped>
.mo-vedio {
  width: 100%;
  height: auto;
  // width: 1106px;
  width: 100%;
  background-color: white;
  .mo-vedio-box {
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 800px;
    margin: 0px auto;
    .vedio-msg {
      width: 100%;
      p {
        width: 100%;
        text-align: left;
        &:nth-of-type(1) {
          font-size: 20px;
        }
        &:nth-of-type(2) {
          font-size: 14px;
          padding-bottom: 10px;
          color: #999;
        }
      }
    }
    .dplayer {
      width: 100%;
      height: 420px;
    }
  }
  .more-movie {
    h3 {
      margin-top: 20px;
    }
  }
}
</style>